<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Photo_main</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
    <link  th:href="@{/css/main.css}" rel="stylesheet" />
</head>
<body>

<div id="vm2">

    <el-row>
        <el-col :span="8">
            <p>当前用户：{{ user.name }}</p>
        </el-col>
        <el-col :span="8" :offset="8">
            <el-button type="primary" @click="logout">退出登录</el-button>
        </el-col>
    </el-row>

    <el-row>
        <el-tabs type="border-card"  @tab-click="tabClick">
            <el-tab-pane style="height: 500px;">
                <span slot="label"><i class="el-icon-date"></i>相册展示</span>
                <el-row :gutter="20">
                    <el-col :span="16">
                        <div  style="width: 600px;">
                            <el-carousel :interval="5000" arrow="always" height="400px" @change="carouselChange">
                                <el-carousel-item v-for="item in pictures">
                                    <img  height="390px" width="600px" :src="base+item.imageUrl"/>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">{{pictureDesc}}</div></el-col>
                </el-row>

                <br/>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="primary" @click="getRandomImages('SJZS')">刷新图片</el-button>
                    </el-form-item>
                    <el-form-item label="查看模式">
                        <el-select v-model="showModel" placeholder="选择一种模式" @change="showModelSelect">
                            <el-option label="随机展示" value="SJZS"></el-option>
                            <el-option label="只看自己" value="ZKZJ"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="个人中心" style="height: 400px;">
                <el-form ref="user" :model="user" label-width="80px">
                    <el-form-item label="用户标识"> <el-input v-model="user.id" :disabled="true"></el-input> </el-form-item>
                    <el-form-item label="用户名称"> <el-input v-model="user.name" maxlength="10"></el-input> </el-form-item>
                    <el-form-item label="用户密码"> <el-input v-model="user.password" maxlength="10"></el-input> </el-form-item>
                    <el-form-item label="手机号码"> <el-input v-model="user.mobile" maxlength="13"></el-input> </el-form-item>
                    <el-form-item label="用户性别">
                        <el-radio-group v-model="user.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveUser">立即保存</el-button>
                        <el-button type="primary" @click="editUserRest">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="图片上传" style="height: 400px;" >
                <el-upload
                        :data={'userId':user.id}
                        action="../file/upload"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane label="我的资源" style="height: 400px;">
                <div style="height: 390px;overflow-y: auto;">
                    <li v-for="item in myImages">
                        <div id="main">
                            <div style="margin-top: 10px; margin-bottom: 10px;">
                                <img :src="base + item.imageUrl" th:width="100" height="100" :id="item.id" @click="imageClick(item.id)" />
                                <p >{{item.imageName}}</p>
                            </div>
                            <div style="margin-top: 10px; margin-bottom: 10px;background: #00b8ff21;width: 762px;">描述:{{item.imageDesc}}</div>
                        </div>
                    </li>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-row>

    <el-dialog title="图片编辑" :visible="dialogFormVisible">
        <el-form :model="dialogForm">
            <el-form-item label="图片标识" :label-width="formLabelWidth">
                <el-input  v-model="dialogForm.id" :disabled="true"> </el-input>
            </el-form-item>
            <el-form-item label="图片名称" :label-width="formLabelWidth">
                <el-input  v-model="dialogForm.imageName" clearable maxlength="10"> </el-input>
            </el-form-item>
            <el-form-item label="描述文本" :label-width="formLabelWidth">
                <el-input  type="textarea" :rows="2" v-model="dialogForm.imageDesc" auto-complete="off" clearable maxlength="200"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="deleteImage">删除这一张图片</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormOk">保存修改</el-button>
        </div>
    </el-dialog>

</div>
<script th:src="@{/js/main.js}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    var user = [[${cUser}]];
    console.log(user);
    vm._data.user = user;
    for(var key in user){
        vm._data.userBack[key] = user[key];
    }
    /*]]>*/
</script>
</body>

</html>